<template>
  <div>
    <div style="margin-bottom: 10px;width: 100%">

      <el-date-picker
          size="default"
          v-model="statePage.dateValue"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-value="[new Date(), new Date()]"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
      <el-input :size="STATUS.inputSize"
                @keyup.enter="getTableData"
                style="margin-left: 60px;width: 250px"
                v-model.trim="statePage.companyName"
                class="w-50 m-2"
                placeholder="搜索企业">

      </el-input>
      <el-button style="margin-left: 60px;" size="default" type="primary" icon="Search" @click="getTableData"/>
      <el-button style="margin-left: 60px" size="default" type="primary" @click="outExcel">导出表格</el-button>
    </div>
    <el-scrollbar>
      <el-table v-loading="statePage.loading" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border
                :row-style="{height: '54.7px'}"
                style="font-size: 15px" stripe height="580px" :data="statePage.table">
        <el-table-column prop="companyName" label="公司名称" width="auto"/>
        <el-table-column align="center" label="各通道提款情况"><!---->
          <el-table-column align="center" label="支付宝">
            <el-table-column align="center" label="提款金额">
              <template #default="scope"><!--slot-scope="scope"-->
                <span>{{ scope.row.companyChannelList.find((item: any) => item.channelId === 1).drawTotal }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="提款次数">
              <template #default="scope"><!--slot-scope="scope"-->
                <span>{{ scope.row.companyChannelList.find((item: any) => item.channelId === 1).drawCount }}</span>
              </template>
            </el-table-column>
          </el-table-column>


          <el-table-column align="center" label="微信">
            <el-table-column align="center" label="提款金额">
              <template #default="scope"><!--slot-scope="scope"-->
                <span>{{ scope.row.companyChannelList.find((item: any) => item.channelId === 2).drawTotal }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="提款次数">
              <template #default="scope"><!--slot-scope="scope"-->
                <span>{{ scope.row.companyChannelList.find((item: any) => item.channelId === 2).drawCount }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="银行">
            <el-table-column align="center" label="提款金额">
              <template #default="scope"><!--slot-scope="scope"-->
                <span>{{ scope.row.companyChannelList.find((item: any) => item.channelId === 3).drawTotal }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="提款次数">
              <template #default="scope"><!--slot-scope="scope"-->
                <span>{{ scope.row.companyChannelList.find((item: any) => item.channelId === 3).drawCount }}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

      </el-table>
    </el-scrollbar>
    <el-pagination v-model:currentPage="statePage.currentPage"
                   layout="total,prev, pager, next, jumper"
                   :total="statePage.total"
                   @current-change="handleCurrentChange">
    </el-pagination>
  </div>


</template>


<script lang="ts" setup>
import {ElMessage} from "element-plus";
import {AllocationReview, DistributeReview, DrawReview} from "../../api/DataReview/Allocation";
import {onMounted, reactive, ref} from "vue";
import {STATUS} from "../../utils/status";

const formOut=reactive({
  companyName:'',
  start:'',
  finish:'',
})
//导出各公司每月提款记录
function outExcel( ) {
  let exportUrl = '/project/company/companydatacheck/exportcompanydrawrecord?companyName='
      + formOut.companyName
      + '&start=' + formOut.start
      + '&finish=' + formOut.finish
  window.open(exportUrl, "_self");
}


const dialogFormVisible = ref(false)

const statePage = reactive({
  currentPage: 1,
  total: 0,
  loading: true,
  companyName: '',
  dateValue: ['', ''],
  table: [],
})


const msg = ref('');
onMounted(() => {
  getTableData()
})

function handleCurrentChange() {
  getTableData()
}

function getTableData() {
  statePage.loading = true

  Object.assign(formOut,{
    companyName: statePage.companyName,
    start: statePage.dateValue[0],
    finish: statePage.dateValue[1]
  })

  DrawReview({
    pageNum: statePage.currentPage,
    companyName: statePage.companyName,
    start: statePage.dateValue[0],
    finish: statePage.dateValue[1]
  })
      .then(function (response: any) {
        if (response.code == 200) {
          statePage.table = response.data.list;
          statePage.total = response.data.total
        } else {
          ElMessage.warning(response.msg)
        }
        statePage.loading = false
      }).catch(function (res: any) {
    statePage.loading = false
    ElMessage.error("页面加载失败")
  })

}


</script>

<style scoped lang="scss">
.card_item {
  display: flex;

  label {
    width: 180px;
  }
}
</style>
